<script lang="ts" setup>
import screenfull from "screenfull"

const { proxy } = getCurrentInstance()!

const isFullScreen = ref(false)

const handleClick = () => {
  if (screenfull.isEnabled) {
    screenfull.toggle()
  } else {
    proxy!.$message("浏览器不支持全屏")
  }
}

function updateFullScreenStatus() {
  isFullScreen.value = screenfull.isFullscreen
}

onMounted(() => {
  if (screenfull.isEnabled) {
    screenfull.on("change", updateFullScreenStatus)
  }
})

onBeforeUnmount(() => {
  if (screenfull.isEnabled) {
    screenfull.off("change", updateFullScreenStatus)
  }
})
</script>

<template>
  <svg-icon
    :icon-name="
      isFullScreen
        ? 'ant-design:fullscreen-exit-outlined'
        : 'ant-design:fullscreen-outlined'
    "
    custom-class="h-2em w-2em"
    @click="handleClick"
  >
  </svg-icon>
</template>

<style scoped></style>
